<template>
  <div class="page-wrapper d-flex flex-column">
    <div class="header">
      <MyButton class="add" icon="el-icon-plus" @click="handleAddUser">
        {{ $t("yonghuguanli.addUser") }}
      </MyButton>
    </div>
    <MyTable
      :data="tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column
        width="180"
        type="index"
        :label="$t('common.order_number')"
        sortable
      ></el-table-column>
      <el-table-column
        prop="user_name"
        :label="$t('yonghuguanli.user_name')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="group_name"
        :label="$t('yonghuguanli.role_simple_name')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="create_time"
        :label="$t('yonghuguanli.create_time')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column :label="$t('common.operate')" min-width="180">
        <template slot-scope="scope">
          <MyButton
            class="text"
            @click="handleShow(scope.row)"
            type="text"
            size="small"
          >
            {{ $t("common.view") }}
          </MyButton>
          <span class="ml-10 mr-10">|</span>
          <MyButton
            class="text"
            @click="handleEdit(scope.row)"
            type="text"
            size="small"
          >
            {{ $t("common.edit") }}
          </MyButton>
          <span class="ml-10 mr-10" v-if="scope.row.user_name !== user_name"
            >|</span
          >
          <MyButton
            class="text"
            type="text"
            size="small"
            v-if="scope.row.user_name !== user_name"
            @click="handleDelete(scope.row)"
            >{{ $t("common.delete") }}</MyButton
          >
        </template>
      </el-table-column>
    </MyTable>
    <AddUserDialog
      :visible.sync="isAddUserDialogShow"
      :roleList="roleList"
      :type="editType"
      @getList="getUserList"
      :row="row"
    />
    <UserDetailDialog
      :visible.sync="isUserDetailShow"
      :row="row"
      :roleList="roleList"
    />
    <EnterPassword
      :visible.sync="isEnterPasswordShow"
      @confirm="handleConfirmPwd"
    />
  </div>
</template>

<script>
import MyButton from "@/components/Button";
import AddUserDialog from "./AddUserDialog.vue";
import UserDetailDialog from "./UserDetailDialog.vue";
import { getUserList, deleteUser } from "./service";
import { getRoleList } from "../role/service";
import EnterPassword from "@/components/dialog/EnterPassword";
import util from "@/utils";
export default {
  components: {
    MyButton,
    AddUserDialog,
    UserDetailDialog,
    EnterPassword,
  },
  data() {
    return {
      tableData: [],
      roleList: [],
      isAddUserDialogShow: false,
      editType: "add",
      isUserDetailShow: false,
      isEnterPasswordShow: false,
      row: {},
    };
  },
  computed: {
    user_name() {
      return this.$store.state.user_name;
    },
  },
  mounted() {
    this.getUserList();
    this.getRoleList();
  },
  methods: {
    async getUserList() {
      const res = await getUserList();
      this.tableData = res.data;
    },
    async getRoleList() {
      const res = await getRoleList();
      this.roleList = res.data.result;
    },
    handleAddUser() {
      this.isAddUserDialogShow = true;
      this.editType = "add";
      this.row = {};
    },
    handleShow(row) {
      this.isUserDetailShow = true;
      this.row = {...row};
    },
    handleEdit(row) {
      this.isAddUserDialogShow = true;
      this.editType = "edit";
      this.row = {...row};
    },
    handleDelete(row) {
      this.$confirm(
        this.$t("yonghuguanli.deletePromit"),
        this.$t("yonghuguanli.delete_user"),
        {
          confirmButtonText: this.$t("common.deleteConfirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.isEnterPasswordShow = true;
          this.row = {...row};
        })
        .catch(() => {});
    },
    async handleConfirmPwd(form) {
      const params = {
        curuser_pwd: form.curuser_pwd,
        user_name: this.row.user_name,
      };
      const res = await deleteUser(params);
      if(res.code == 0) {
        util.msg.success("deleteSuccess");
        this.isEnterPasswordShow = false;
        this.getUserList()
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page-wrapper {
  width: 100%;
}
</style>
